<template>
  <div>
    <span @click="searchFlagCheck" style="color: #409EFF; cursor: pointer;">
      展开搜索条件
    </span>
    <div v-if="searchFlag">
      <el-form :model="searchForm" label-width="120px">
        <el-form-item label="汽车ID">
          <el-input v-model="searchForm.carId" placeholder="请输入汽车ID"></el-input>
        </el-form-item>

        <el-form-item label="用户ID">
          <el-input v-model="searchForm.userId" placeholder="请输入商户ID"></el-input>
        </el-form-item>

        <el-form-item label="订单金额">
          <el-input v-model="searchForm.totalAmount" placeholder="请输入订单金额"></el-input>
        </el-form-item>

        <el-form-item label="支付方式">
          <el-input v-model="searchForm.paymentMethod" placeholder="请输入支付方式"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div v-if="userServiceWaitUse && userServiceWaitUse.list && userServiceWaitUse.list.length">
      <el-table :data="userServiceWaitUse.list" stripe>
        <el-table-column prop="orderId" label="订单号" />
        <el-table-column label="服务详情">
          <template #default="scope">
            <el-button size="small" @click="toggleDetails(scope.row)">
              {{ scope.row.showDetails ? '隐藏详情' : '查看详情' }}
            </el-button>
            <div v-if="scope.row.showDetails">
              <div v-if="scope.row.serviceDetail">
                <div v-if="parsedDetail = parseServiceDetail(scope.row.serviceDetail)">
                  服务编号: {{ parsedDetail.serviceId }} <br />
                  商家编号: {{ parsedDetail.shopId }} <br />
                  服务名: {{ parsedDetail.serviceName }} <br />
                  服务价格: {{ parsedDetail.servicePrice }} <br />
                  服务描述: {{ parsedDetail.details }} <br />
                  必需品: {{ parseServiceItems(parsedDetail.serviceItems) }} <br />
                  工时: {{ parsedDetail.estimatedTime }} <br />
                  服务条款: {{ parsedDetail.terms }} <br />
                  流程信息: {{ parseProcesses(parsedDetail.serviceProcesses) }} <br />
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="支付价格" />
        <el-table-column prop="appointmentTime" label="预约时间" />
        <el-table-column prop="payStatus" label="支付状态">
          <template v-slot="scope">
            {{ checkPay(scope.row.payStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template v-slot="scope">
            {{ checkState(scope.row.orderState) }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="useOrder(scope.row.orderId)">使用</el-button><br/>
            <el-button size="small" @click="findUserInfo(scope.row.userId)">联系买家</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <p>没有待使用订单</p>
    </div>

    <!-- 使用订单对话框 -->
    <el-dialog v-model="useOrderFlag" title="使用订单" width="500" :before-close="handleClose">
      <div style="padding: 20px;">
        <el-form :model="useOrderForm" ref="orderForm">
          <el-form-item label="订单编号">
            <el-input v-model="useOrderForm.orderId" placeholder="请输入订单编号" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="送达客户身份">
            <el-input v-model="useOrderForm.role" placeholder="请输入送达客户身份"></el-input>
          </el-form-item>
          <el-form-item label="位置">
            <el-input v-model="useOrderForm.location" placeholder="请输入位置"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="useOrderForm.realname" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="useOrderForm.phone" placeholder="请输入电话"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer" style="text-align: right;">
          <el-button @click="useOrderFlag = false">取消</el-button>
          <el-button type="primary" @click="useOrder()">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户联系方式对话框 -->
    <el-dialog v-model="userFlag" title="用户联系方式">
      <div v-if="user">
        用户名：{{ user.userName }}<br />
        用户电话：{{ user.userPhone }}
      </div>
      <div v-else>
        <p>未查找到用户联系方式</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      searchFlag:false,
      userServiceWaitUse: { list: [] },
      searchForm: {
        carId: '',
        userId: '',
        totalAmount: '',
        paymentMethod: ''
      },
      useOrderFlag: false,
      useOrderForm: {
        orderId: '',
        role: '',
        location: '',
        realname: '',
        phone: ''
      },
      user: null,
      userFlag: false,
    };
  },
  methods: {
    searchFlagCheck(){
      if(this.searchFlag){
        this.searchFlag = false;
      }else{
        this.searchFlag = true;
      }
    },
    toggleDetails(row) {
      row.showDetails = !row.showDetails;
    },
    
    findUserInfo(userId) {
      this.userFlag = true;
      this.$http.get("/user/userInfo/selectUserInfo", { params: { userId: userId } })
        .then(resp => {
          this.user = resp.data.data || null;
        })
        .catch(error => {
          console.error('获取用户信息失败:', error);
          this.user = null;
        });
    },
    
    checkPay(state) {
      switch (state) {
        case 0: return '未支付';
        case 1: return '已支付';
        case 2: return '支付中';
        case 3: return '已退款';
        case 4: return '退款中';
        case 5: return '退款失败';
        default: return '未知状态';
      }
    },
    
    checkState(state) {
      switch (state) {
        case 1: return '已完成';
        case 2: return '已取消';
        case 3: return '已关闭';
        case 4: return '进行中';
        case 5: return '待评价';
        case 6: return '待使用';
        case 7: return '待发货';
        default: return '未知状态';
      }
    },
    
    useOrder(orderId) {
      this.useOrderForm.orderId = orderId;
      // 其他逻辑...
    },

    reset() {
      this.findServiceWaitUse();
    },
    
    search() {
      this.$http.get("/order/order/getOrderListShop", {
        params: {
          carId: this.searchForm.carId,
          userId: this.searchForm.userId,
          totalAmount: this.searchForm.totalAmount,
          paymentMethod: this.searchForm.paymentMethod,
          orderState: 6
        }
      }).then(resp => {
        this.userServiceWaitUse = resp.data.data || { list: [] };
        this.userServiceWaitUse.list.forEach(item => {
          item.showDetails = false;
        });
      }).catch(error => {
        console.error('搜索订单失败:', error);
      });
    },
    
    findServiceWaitUse() {
      this.$http.get("/order/order/getOrderListShop", { params: { orderState: 6 } })
        .then(res => {
          this.userServiceWaitUse = res.data.data || { list: [] };
          this.userServiceWaitUse.list.forEach(item => {
            item.showDetails = false;
          });
        })
        .catch(error => {
          console.error('获取订单列表失败:', error);
        });
    },
    
    parseServiceDetail(serviceDetail) {
      if (!serviceDetail) {
        console.error('Service detail is null or undefined:', serviceDetail);
        return {};
      }
      
      return {
        serviceId: serviceDetail.id || 'N/A',
        shopId: serviceDetail.shopId || 'N/A',
        serviceName: serviceDetail.name || 'N/A',
        servicePrice: serviceDetail.price || 'N/A',
        details: serviceDetail.description || '无描述',
        serviceItems: serviceDetail.items || [],
        estimatedTime: serviceDetail.time || '未知',
        terms: serviceDetail.terms || '无条款',
        serviceProcesses: serviceDetail.processes || []
      };
    },

    // 其他方法...
  },
  created() {
    this.findServiceWaitUse();
  }
};
</script>

<style scoped>
/* 通用样式 */
body {
  font-family: Arial, sans-serif;
}

/* 表单样式 */
.el-form {
  margin-bottom: 20px;
}

.el-form-item {
  margin-bottom: 15px;
}

.el-input {
  width: 300px;
  border-radius: 4px;
}

/* 按钮样式 */
.el-button {
  margin-right: 10px;
  border-radius: 4px;
}

.el-button:hover {
  background-color: #f0f0f0;
  border-color: #dcdcdc;
}

/* 表格样式 */
.el-table {
  border: 1px solid #dcdcdc;
  border-radius: 4px;
}

.el-table th, .el-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #eaeaea;
}

.el-table th {
  background-color: #f9f9f9;
  font-weight: bold;
}

.el-table tr:nth-child(even) {
  background-color: #f7f7f7;
}

.el-table tr:hover {
  background-color: #ececec;
}

/* 无记录提示 */
p {
  text-align: center;
  color: #888;
  margin-top: 20px;
}

/* 对话框样式 */
.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  margin-left: 10px;
}
</style>